<template>
	<view class="start-live-container">
		<!-- 背景图 - 添加横竖屏模式动态类 -->
		<image class="background-image" :class="{ 'horizontal-mode': isHorizontal, 'vertical-mode': !isHorizontal }"
			:src="backgroundImage" :mode="isHorizontal ? 'aspectFill' : 'aspectFill'">
		</image>

		<!-- 内容区域 -->
		<view class="content-wrapper" v-if="!isStarting">
			<!-- 动态用户信息栏 -->
			<view class="user-info-bar" v-if="userInfo">
				<view class="user-avatar-container">
					<image class="user-avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'"></image>
				</view>
				<text class="user-nickname">{{ userInfo.nickname || '主播昵称' }}</text>
			</view>

			<!-- 输入直播间标题 -->
			<view class="input-section">
				<button class="func-btns" @click="chooseCover">
					<image v-if="coverPreview" class="cover-preview" :src="coverPreview + '?timestamp=' + Date.now()"
						mode="aspectFill"></image>
					<text>{{ btnText }}</text>
				</button>
				<input v-model="title" class="title-input" placeholder="请输入直播间标题" placeholder-class="placeholder-style"
					maxlength="30" />
			</view>

			<!-- 功能按钮区域 -->
			<view class="function-buttons">
				<view class="button-row">
					<button class="func-btn" @click="flipCamera">
						<image class="btn-icon" src="/static/fan.png" mode="aspectFit"></image>
						<text>翻转</text>
					</button>
					<button class="func-btn" @click="showBeauty">
						<image class="btn-icon" src="/static/mei.png" mode="aspectFit"></image>
						<text>美颜</text>
					</button>
					<button class="func-btn" @click="editIntro">
						<image class="btn-icon" src="/static/jie.png" mode="aspectFit"></image>
						<text>直播介绍</text>
					</button>
					<button class="func-btn" @click="toggleOrientation">
						<image class="btn-icon" src="/static/heng.png" mode="aspectFit"></image>
						<text>{{ isHorizontal ? '纵向直播' : '横向直播' }}</text>
					</button>
					<button class="func-btn" @click="showMore">
						<image class="btn-icon" src="/static/neng.png" mode="aspectFit"></image>
						<text>更多功能</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 协议确认 -->
		<view class="agreement-section" v-if="!isStarting">
			<checkbox-group @change="toggleAgreement">
				<label class="agreement-label">
					<checkbox :checked="agreed" color="#55aaff" />
					<text class="agreement-text">我已阅读并同意《启点直播主播行为规范》及《启点直播服务协议》《启点直播个人信息保护政策》</text>
				</label>
			</checkbox-group>
			<button class="start-btn" :disabled="!agreed" @click="startLive">立即开播</button>
		</view>

		<!-- 倒计时和封面图 -->
		<view class="countdown-container" v-if="isStarting">
			<image class="countdown-cover" :class="{ 'horizontal-mode': isHorizontal, 'vertical-mode': !isHorizontal }"
				:src="coverPreview || backgroundImage" :mode="isHorizontal ? 'aspectFit' : 'aspectFill'"></image>
			<view class="countdown-text">{{ countdown }}</view>
		</view>

		<!-- 美颜 -->
		<beauty-modal :visible="showBeautyModal" @close="showBeautyModal = false" @select="handleBeautySelect" />
		<!-- 更多功能 -->
		<more :visible="showMoreModal" @close="showMoreModal = false" @live-notice="handleLiveNotice"
			@quality="handleQuality" @screen-record-change="handleScreenRecordChange" />
		<!-- 直播介绍 -->
		<intro :visible="showIntroModal" @close="showIntroModal = false" @confirm="handleIntroConfirm" />
		<!-- 横纵切换弹框 -->
		<horizontal :visible="showOrientationModal" :currentOrientation="isHorizontal"
			@close="showOrientationModal = false" @confirm="handleOrientationConfirm" />
	</view>
</template>

<script>
	import beautyModal from '@/pages/beautyModal/beautyModal.vue';
	import more from '@/pages/more/more.vue'
	import intro from '@/pages/intro/intro.vue'
	import horizontal from '../horizontal/horizontal.vue';
	import notice from '@/pages/notice/notice.vue'
	export default {
		components: {
			beautyModal,
			more,
			notice,
			intro,
			horizontal
		},
		data() {
			return {
				agreed: false,
				title: '',
				userInfo: null,
				backgroundImage: '/static/logo.png',
				coverImage: null,
				coverPreview: null,
				btnText: '选择封面',
				showBeautyModal: false,
				showMoreModal: false,
				showIntroModal: false,
				introContent: '',
				showOrientationModal: false,
				isHorizontal: false, // 控制横竖屏状态：false-纵向，true-横向
				isStarting: false,
				countdown: 0
			}
		},
		onLoad() {
			this.getUserInfo();
			uni.$on('updateUserInfo', this.handleUserInfoUpdate);
		},
		onUnload() {
			uni.$off('updateUserInfo', this.handleUserInfoUpdate);
		},
		methods: {
			getUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						this.userInfo = {
							avatar: userInfo.avatar || '/static/images/default-avatar.png',
							nickname: userInfo.nickname || '主播昵称'
						};
					} else {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				} catch (e) {
					console.error('获取用户信息失败:', e);
				}
			},

			handleUserInfoUpdate(userInfo) {
				this.userInfo = {
					avatar: userInfo.avatar || '/static/images/default-avatar.png',
					nickname: userInfo.nickname || '主播昵称'
				};
				uni.setStorageSync('userInfo', userInfo);
			},

			toggleAgreement(e) {
				this.agreed = e.detail.value.length > 0
			},

			editIntro() {
				this.showIntroModal = true;
			},
			handleIntroConfirm(content) {
				this.introContent = content;
				uni.showToast({
					title: '直播介绍已保存',
					icon: 'success'
				});
			},

			chooseCover() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.coverPreview = null;
						this.$nextTick(() => {
							this.coverPreview = tempFilePath;
							this.backgroundImage = tempFilePath;
							this.btnText = '修改封面';
						});
						uni.showToast({
							title: '封面设置成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('选择封面失败:', err);
						uni.showToast({
							title: '选择封面失败',
							icon: 'none'
						});
					}
				});
			},
			flipCamera() {
				uni.showToast({
					title: '摄像头翻转',
					icon: 'none'
				})
			},
			showBeauty() {
				this.showBeautyModal = true
			},
			handleBeautySelect(option) {
				uni.showToast({
					title: `已选择: ${option}`,
					icon: 'none'
				})
			},

			toggleOrientation() {
				this.showOrientationModal = true;
			},

			handleOrientationConfirm(isHorizontal) {
				this.isHorizontal = isHorizontal; // 更新横竖屏状态
			},

			showMore() {
				console.log('showMore triggered');
				this.showMoreModal = true
			},
			handleLiveNotice() {
				uni.navigateTo({
					url: '/pages/live/notice-settings'
				})
			},
			handleQuality() {
				uni.showActionSheet({
					itemList: ['流畅', '标清', '高清'],
					success: (res) => {
						console.log('选择了清晰度:', res.tapIndex)
					}
				})
			},
			handleScreenRecordChange(enabled) {
				if (enabled) {
					this.startScreenRecording()
				} else {
					this.stopScreenRecording()
				}
			},
			startScreenRecording() {
				uni.showLoading({
					title: '准备录屏中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '录屏已开始',
						icon: 'none'
					})
				}, 1000)
			},
			stopScreenRecording() {
				uni.showToast({
					title: '录屏已停止',
					icon: 'none'
				})
			},

			startLive() {
				if (!this.agreed) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none'
					})
					return
				}

				if (!this.title) {
					uni.showToast({
						title: '请输入直播间标题',
						icon: 'none'
					})
					return
				}

				if (!this.userInfo) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 1500);
					return;
				}

				this.isStarting = true;
				this.countdown = 3;

				const timer = setInterval(() => {
					this.countdown--;

					if (this.countdown <= 0) {
						clearInterval(timer);
						this.navigateToLive();
					}
				}, 1000);
			},

			navigateToLive() {
				const liveData = {
					title: this.title,
					cover: this.coverImage || this.backgroundImage,
					anchorInfo: this.userInfo,
					startTime: new Date().getTime(),
					isHorizontal: this.isHorizontal
				};

				uni.setStorageSync('currentLive', liveData);

				uni.navigateTo({
					url: '/pages/broadcast/broadcast?title=' + encodeURIComponent(this.title) + '&isHorizontal=' +
						this.isHorizontal
				});
			}
		}
	}
</script>

<style lang="scss">
	.start-live-container {
		position: fixed;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		z-index: 1;

		.background-image {
			position: absolute;
			z-index: 0;
			transition: all 0.3s ease;

			// 横向模式：16:9比例显示在中间区域
			&.horizontal-mode {
				width: 100vw; // 宽度占满整个屏幕
				height: 56.25vw; // 16:9比例高度 (100/16*9)
				left: 0; // 水平居中
				top: 35vh; // 垂直居中起点
				transform: translateY(-50%); // 垂直居中调整
				object-fit: cover; // 保持比例并覆盖整个区域
			}

			// 纵向模式：全屏显示
			&.vertical-mode {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.content-wrapper {
			position: relative;
			z-index: 1;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			height: calc(100vh - 80rpx);
			overflow: hidden;
		}

		.func-btns {
			position: relative;
			width: 18vh;
			height: 20vw;
			font-size: 18rpx;
			background-color: rgba(255, 255, 255, 0.3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			overflow: hidden;

			.cover-preview {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 0;
				opacity: 0.7;
			}

			text {
				position: relative;
				z-index: 1;
				top: 40rpx;
				font-size: 25rpx;
				font-weight: 700;
				color: #000;
			}
		}

		.btn-icons {
			width: 8vw;
			height: 8vw;
		}

		.user-info-bar {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			margin-bottom: 20rpx;

			.user-avatar-container {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				margin-right: 20rpx;

				.user-avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}

			.user-nickname {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
		}

		.input-section {
			display: flex;
			align-items: center;
			// margin-top: 800rpx;
			margin-top: 500rpx;
			margin-bottom: 20rpx;

			.title-input {
				width: 100%;
				height: 100rpx;
				border-radius: 50rpx;
				padding: 0 40rpx;
				font-size: 32rpx;
				color: white;
			}

			.placeholder-style {
				color: white;
				font-size: 32rpx;
			}
		}

		.function-buttons {
			margin-bottom: 20rpx;

			.button-row {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
			}

			.func-btn {
				width: 50%;
				height: 120rpx;
				background-color: rgba(255, 255, 255, 0);
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 3rpx 0;
				border: 1rpx solid rgba(255, 255, 255, 0);

				.btn-icon {
					margin: 5rpx;
				}

				text {
					font-size: 18rpx;
					color: #333;
					font-weight: 700;
				}
			}
		}

		.agreement-section {
			position: absolute;
			padding: 30rpx;
			bottom: 0rpx;
			margin-top: 20rpx;
			background-color: rgb(4, 13, 16);
			z-index: 10;

			.agreement-label {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
			}

			.agreement-text {
				font-size: 24rpx;
				color: white;
				margin-left: 10rpx;
			}
		}

		.start-btn {
			width: 100%;
			height: 100rpx;
			background-color: #55aaff;
			color: #fff;
			border-radius: 50rpx;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;

			&[disabled] {
				background-color: #cccccc;
				color: #999999;
			}
		}

		.countdown-container {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			z-index: 100;
			background-color: #000;

			.countdown-cover {
				position: absolute;
				z-index: 1;

				&.vertical-mode {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				&.horizontal-mode {
					width: 100%;
					height: 56.25vw;
					max-height: 100vh;
					object-fit: contain;
					margin: 0 auto;
					left: 0;
					right: 0;
				}
			}

			.countdown-text {
				font-size: 200rpx;
				color: #fff;
				text-shadow: 0 0 20rpx rgba(0, 0, 0, 0.5);
				z-index: 2;
				font-weight: bold;
				animation: pulse 1s infinite;
			}
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}

			100% {
				transform: scale(1);
			}
		}
	}
</style>